<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
		<!--引入字体样式-->
		<link rel="stylesheet" href="./css/fontawesome/all.min.css">
		<title>简易购</title>
	</head>
	<body>
		<!-- 导航条-->
		<div class="container-fluid">
			<nav class="navbar navbar-expand-lg navbar-light bg-light">
				<div class="container">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
					 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<span class="navbar-text text-dark">
						简易购欢迎您！ 请
					</span>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item ">
								<a class="nav-link text-dark" href="#">登录<span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link text-danger pl-1" href="#">免费注册</a>
							</li>
						</ul>
						<form class="form-inline my-2 my-lg-0">
							<a class="nav-link  pr-4 text-dark" href="#">我的订单</a>
							<a class="nav-link  pl-2 text-dark" href="#">我的简易购</a>
						</form>
					</div>
				</div>
			</nav>
		</div>
		<!-- /导航条 -->
		<!-- brand -->
		<div class="container">
			<div class="row">
				<p style="font-size: 35px;font-weight: bold;">简易购&nbsp;&nbsp;&nbsp;&nbsp;<scan style="font-size: 20px;font-weight: 400;">购物车页</scan>
				</p>
			</div>
		</div>
		<!-- /brand -->
		<!-- 选框头 -->
		<div class="container">
			<div class="row bg-danger text-light py-1">
				<div class="col-1 border-right text-center">□ 全部</div>
				<div class="col-6  border-right text-center">商品</div>
				<div class="col-1 border-right text-center">单价(元)</div>
				<div class="col-2 border-right text-center">数量</div>
				<div class="col-1 border-right text-center">小计(元)</div>
				<div class="col-1  text-center">操作</div>
			</div>

		</div>
		<!-- /选框头 -->
		<!-- 表格 -->
		<div class="container mt-3">
			<div class="row  ">
				<div class="col-1 border-top border-bottom border-left text-center py-3">
					<div class="form-check">
						<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
					</div>
				</div>
				<div class="col-6  border-top border-bottom text-center py-3">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-2 border-top border-bottom  text-center py-3">数量</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-1 border-top border-bottom border-right text-center py-3">
					<a href="">删除</a>
				</div>
			</div>
			<div class="row  ">
				<div class="col-1 border-top border-bottom border-left text-center py-3">
					<div class="form-check">
						<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
					</div>
				</div>
				<div class="col-6  border-top border-bottom text-center py-3">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-2 border-top border-bottom  text-center py-3">数量</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-1 border-top border-bottom border-right text-center py-3">
					<a href="">删除</a>
				</div>
			</div>
			<div class="row  ">
				<div class="col-1 border-top border-bottom border-left text-center py-3">
					<div class="form-check">
						<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
					</div>
				</div>
				<div class="col-6  border-top border-bottom text-center py-3">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-2 border-top border-bottom  text-center py-3">数量</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-1 border-top border-bottom border-right text-center py-3">
					<a href="">删除</a>
				</div>
			</div>
			<div class="row  ">
				<div class="col-1 border-top border-bottom border-left text-center py-3">
					<div class="form-check">
						<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
					</div>
				</div>
				<div class="col-6  border-top border-bottom text-center py-3">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-2 border-top border-bottom  text-center py-3">数量</div>
				<div class="col-1 border-top border-bottom  text-center py-3">1999.00</div>
				<div class="col-1 border-top border-bottom border-right text-center py-3">
					<a href="">删除</a>
				</div>
			</div>
		</div>
		<div class="container mt-5">
			<div class="row  ">
				<div class="col-1 border-top border-bottom border-left text-center py-3">
					<div class="form-check">
						<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
					</div>
				</div>
				<div class="col-5  border-top border-bottom py-3">
					<a href="">删除选中商品</a>
				</div>
				<div class="col-1 border-top border-bottom  text-center py-3"></div>
				<div class="col-2 border-top border-bottom  text-center py-3">总价（不含运费）：</div>
				<div class="col-2 border-top border-bottom  py-3 text-danger" style="font-weight: 700;">¥16283.00</div>
					<button type="button" class="col-1 btn btn-danger rounded-0" >结&nbsp;算</button>
			</div>
		</div>
		<!-- /表格 -->
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="./js/plugins/jQuery/jquery-3.3.1.slim.min.js"></script>
		<script src="./js/plugins/bootstrap/popper.min.js"></script>
		<script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
	</body>
</html>
